<template>
  <div id="message">
    <div class="search">
      <van-search
        v-model="name"
        shape="round"
        placeholder="搜索"
        @update:model-value="search"
      />
    </div>
    <div class="list">
      <van-empty
        v-if="flag"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="暂无消息"
        style="margin-top: 20%"
      />
      <div class="ls" v-for="item in newlist" :key="item.id">
        <van-swipe-cell right-width="70">
          <img
            :src="
              item.imgsrc
                ? item.imgsrc
                : item.sex == 1
                ? '/icon/男生默认头像.png'
                : '/icon/女生默认头像.png'
            "
            alt=""
            @click="xiang"
          />
          <span class="ls_name">{{ item.uname }}</span>
          <img
            src="/icon/电话.png"
            alt=""
            @click="call(item._id)"
            class="ls_phone"
          />
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              class="button"
              @click="del(item._id)"
            />
          </template>
        </van-swipe-cell>
      </div>
      <TUICallKit
        style="
          width: 100vw;
          height: 100vh;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 9999;
        "
      />
    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useCounterStore } from "../../stores/counter";

import {
  TUICallKit,
  TUICallKitServer,
  TUICallType,
} from "@tencentcloud/call-uikit-vue";
import * as GenerateTestUserSig from "../../debug/GenerateTestUserSig-es";
const SDKAppID = 1600051832;
const SDKSecretKey =
  "2de928a45951946b14c2206cdceb76f680462eae98d3ccc5aade564fcc93cdd2";

const useStore = useCounterStore();

const flag = ref(false);
// 搜索后的列表
const newlist = computed(() => {
  let newlist = list.value.filter((item) => {
    return item.uname.includes(name.value);
  });
  if (newlist.length === 0) {
    flag.value = true;
  } else {
    flag.value = false;
  }
  return newlist.sort((a, b) => {
    return b.istop - a.istop;
  });
});

// 搜索内容
const name = ref("");
const search = () => {
  console.log(name.value);
};

const user_id = useStore.info._id;
// 用户列表
const list = computed(() =>
  useStore.list.filter((item) => {
    return item._id !== user_id;
  })
);

// 删除
const del = (id) => {
  useStore.delete(id);
};

const callerUserID = ref(user_id.toString());
const call = async (to_id) => {
  const calleeUserID = ref(to_id.toString());
  await TUICallKitServer.call({
    userID: calleeUserID.value,
    type: TUICallType.VIDEO_CALL,
  });
};

onMounted(() => {
  useStore.getuser();
  const { userSig } = GenerateTestUserSig.genTestUserSig({
    userID: callerUserID.value,
    SDKAppID,
    SecretKey: SDKSecretKey,
  });
  TUICallKitServer.init({
    userID: callerUserID.value,
    userSig,
    SDKAppID,
  });
});
</script>
  
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.goods-card {
  margin: 0;
  background-color: "#fff";
}

.button {
  width: 5rem;
  height: 100%;
}

#message {
  width: 100%;
  height: 100%;
}

.search {
  width: 70%;
  margin-left: 15%;
  height: 2rem;
  margin-top: 4%;
  margin-bottom: 4%;
}

.list {
  width: 100%;
}

.ls {
  width: 100%;
  height: 4.9rem;
  position: relative;
  border-bottom: 1px solid rgb(218, 218, 218);
  box-sizing: border-box;
}

.ls img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-left: 5%;
  margin-top: 2%;
}

.ls_name {
  position: absolute;
  font-size: 1.2rem;
  margin-left: 5%;
  margin-top: 2%;
  max-width: 6rem;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
}

.ls_test {
  position: absolute;
  font-size: 1rem;
  margin-left: 5%;
  margin-top: 11%;
  color: #767676;
  max-width: 12rem;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
}

.ls_phone {
  width: 2rem !important;
  height: 2rem !important;
  position: absolute;
  margin-top: 4% !important;
  margin-left: 62% !important;
  border-radius: 0% !important;
}
</style>